<template>
    <div class="button">
        <div class="button-parcel">
            <div class="button-template" isSlide="true">
                <div class="button-name">项目名称</div>
                <div class="button-more">· · ·</div>
            </div>
            <div class="button-move" isSlide="true">
                <div class="button-name">项目名称</div>
                <div class="button-more">· · ·</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        // document.addEventListener("visibilitychange", function () {
            // if (!document.hidden) {
                window.addEventListener('animationend', (res) => {
                    if (res.target.getAttribute('isSlide') == 'true') {
                        document.querySelector('.button-template').style.opacity = '0';
                    }
                })
                document.querySelector('.button').addEventListener('mouseleave', () => {
                    document.querySelector('.button-template').style.opacity = '1';
                })
            // } else {
            //     document.querySelector('.button-template').style.opacity = '1';
            // }
        // });

    }
}
</script>

<style scoped lang="less">
.button:hover {
    .button-template {
        display: flex;
        animation: butSlide2 .5s linear;
    }

    .button-move {
        display: flex;
        animation: butSlide .5s linear;
    }
}
// .template-hide{
//     animation: butSlide .5s reverse ;
// }
// .move-hide{
//     animation: butSlide2 .5s reverse ;
// }

.button {
    width: 200px;
    height: 32px;
    background: #f5f7f7;
    display: flex;
    border-radius: 20px;
    display: flex;

    .button-parcel {
        margin: auto;
        position: relative;
        overflow: hidden;
        display: flex;
        width: 100%;
        height: 16px;
    }

    .button-template,
    .button-move {
        height: 16px;
        line-height: 15px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        padding: 0px 20px;
        margin: auto 0px;
        position: absolute;
        z-index: 99;

        .button-name {
            text-align: left;
            flex-grow: 1;
            font-size: 14px;
        }

        .button-more {
            width: 60px;
            font-size: 12px;
            text-align: right;
            font-weight: 600;
        }
    }

    .button-move {
        color: #43b984;
        display: none;
    }
}

@keyframes butSlide {
    0% {
        // transform: translateY(-100%);
        top: -100%;
    }

    45% {
        // transform: translateY(0px);
        top: 0%;
    }

    60% {
        // transform: translateY(12%);
        top: 12%;
    }

    80% {
        // transform: translateY(-8%);
        top: -8%;
    }

    100% {
        // transform: translateY(0);
        top: 0%;
    }
}

@keyframes butSlide2 {
    0% {
        // transform: translateY(0%);
        top: 0%;
    }

    25% {
        // transform: translateY(50%);
        top: 50%;
    }

    50% {
        // transform: translateY(100%);
        top: 100%;
    }

    100% {
        // transform: translateY(100%);
        top: 100%;
        opacity: 0;
    }
}
</style>